import Comp1 from "./components/comp1";
import React from "react";
import Mock from "mockjs";
import "./App.css";
import ListItem from "./components/listItem";
class App extends React.Component {
  state = {
    flag: false,
    list: Mock.mock({
      "list|10": [
        {
          id: "@id",
          image: "@image(120x80, @color)",
          title: "@ctitle",
          desc: "@cword(10, 20)",
        },
      ],
    }).list,
  };
  handleClick() {
    this.setState({
      flag: !this.state.flag,
    });
  }
  render() {
    const { flag, list } = this.state;
    return (
      <React.Fragment>
        <div className="App">
          <button onClick={() => this.handleClick()}>切换</button>
          {/* 条件渲染 */}
          {flag ? "真" : "假"}
          {flag && <Comp1></Comp1>}

          {/* 列表渲染 */}
          <div className="list">
            {list.map((v, i) => {
              // 组件通信
              // 父子通讯
              return (
                <ListItem
                  key={i}
                  title={v.title}
                  image={v.image}
                  desc={v.desc}
                ></ListItem>
              );
            })}
          </div>
        </div>
        <div className="123"></div>
      </React.Fragment>
    );
  }
}

export default App;

